<template>
	<view class="bar-container" :style="'width:'+screenWidth+'px ;height:'+height+'px;background-color:'+backgroundColor">
		<view class="indicator" :style="'left:'+xDiff+'px;background:'+indicatorBackground+';border:'+indicatorPadding+'px solid '+screenBackgroundColor+';width:'+indicatorSize+'px;height:'+indicatorSize+'px;top:'+(-(indicatorSize/2+indicatorPadding))+'px'">	
				<view class="indicator-before" :style="'left:-'+digHoleAngle.width+'px;width: '+digHoleAngle.width+'px;height: '+digHoleAngle.height+'px;top:'+indicatorSize/2+'px;box-shadow: 0.2px -10px 0 0 '+screenBackgroundColor+';'">
					
				</view>
				<view class="indicator-after" :style="'right:-'+digHoleAngle.width+'px;width: '+digHoleAngle.width+'px;height: '+digHoleAngle.height+'px;top:'+indicatorSize/2+'px;box-shadow: -0.2px -10px 0 0 '+screenBackgroundColor+';'">
					
				</view>
				<view class="indicator-content" @tap="tapIndicator">
					<slot name="indicatorContent"  ></slot>
				</view>
				
		</view>
		<view 
		v-for="(item,index) in items"
		:key="index"
		class="bar-item item-container" @tap="selectTab(index,item)" :style="'width:'+itemWidth+'px'">			
			<view v-if="item.type=='indicator'"></view>
			<view v-else class="icon">
				<image v-if="current==index && item.selectedIcon" :src="item.selectedIcon.src" :style="'width: '+(item.selectedIcon.width?item.selectedIcon.width:item.icon.width)+'px;height: '+(item.selectedIcon.height?item.selectedIcon.height:item.icon.height)+'px;'"></image>
			    <image v-else :src="item.icon.src" :style="'width: '+item.icon.width+'px;height: '+item.icon.height+'px;'"></image>
			</view>
			<view v-if="item.type!='indicator'" class="text" :style="'color:'+(current==index?selectedColor:color)+';font-size:'+item.fontSize">
				{{item.text}}
			</view>
		</view>	
	</view>
</template>
<script>
	export default{
		props:{
			current:{
				default:0,
				type:Number
			},
			selectedColor:{
				default:"",
				type:String
			},
			color:{
				default:"",
				type:String
			},
			height:{
				default:60,
				type:Number
			},
			backgroundColor:{
				default:"#eee",
				type:String
			},
			indicatorBackground:{
				default:"green",
				type:String
			},
			screenBackgroundColor:{
				default:"white",
				type:String
			},
			indicatorPadding:{
				default:4,
				type:Number
			},
			indicatorSize:{
				default:50,
				type:Number
			},
			
			digHolePosition:{
				default:0,//在哪个item的左侧打洞
				type:Number
			},
			digHoleAngle:{
				default:()=>{
					return{
						width:25,
						height:20
					} 
				},
				type:Object
			},
			items:{
				default:()=>[],
				type:Array
			}
		},
		data(){
			return {
				// current:0,
				screenWidth:0			
			}
		},
		computed:{
			xDiff(){
				let indicator = this.indicatorPadding*2+this.indicatorSize
				let count = this.items.length
				return this.screenWidth/count*this.digHolePosition+(this.screenWidth/count-indicator)/2
			},
			itemWidth(){
				let count = this.items.length
				return this.screenWidth/count
			}
		},
		methods:{
			tapIndicator(){
				this.$emit("onIndicatorClick")
			},
			selectTab(index,item){
				this.current = index
				this.$emit("onTabSelect",index,item)
			}
		},
		mounted() {
			
		},
		created() {
			
			uni.getSystemInfo({
				success: (result) => {
					
					this.screenWidth = result.screenWidth
				},
				fail: (err) => {
					//console.log(err)
				}
			})
		},
		
	}
</script>
<style>
	.bar-container {
		position: fixed;
		bottom: 0px;		
		display: flex;
	}
	
	
	.item-container {
		
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
		justify-content: center;
	}
	
	.icon {		
		position: relative;
		display: flex;
		justify-content: center;
				
		
	}
	
	
	
	.icon image {
		align-self: center;
	}
	
	.text {	
		
		
		align-self: center;				
		
	}
	
	.text text {
		
		align-self: center;
	}
	
	
	.indicator{
		position: absolute;		
		border-radius: 50%;		
		
	
	}
	
	.indicator-before{
		position: absolute;	
		
		border-top-right-radius: 100%;
		background-color: transparent;
	}
	.indicator-after{		
		position: absolute;		
		
		border-top-left-radius: 100%;		
		background-color: transparent;
	}
	.indicator-content{
		/* display: flex; */
		width: 100%;
		height: 100%;
		
		
		
	}
</style>
